<template>
  <div>
    <mavon-editor v-model="note.noteMd"
                  style="height: 100%; caret-color: black"
                  ref=md
                  @save="saveNote"
                  fontSize="16px">
      <template v-slot:left-toolbar-after>
        <button
          type="button"
          title="文件上传"
          class="op-icon fa markdown-upload iconfont iconupload"
          aria-hidden="true"
          @click="uploadFile"
        >
          <!-- 这里用的是element-ui给出的图标 -->
          <i class="el-icon-upload" />
        </button>
      </template>
    </mavon-editor>
    <input ref="uploadInput" style="display: none" type="file" @change="uploadFileChange" >
  </div>
</template>

<script>
export default {
  name: "NoteEditor",
  props:{
    paperId:{
      type:Number,
      default:()=>{return 0}
    }
  },
  data(){
    return{
      note:{
        noteId:-1,
        noteMd:'',
        noteHtml:'',
      },
      id:this.paperId
    }
  },
  methods:{
    /*
    加载md内容
     */
    getNote(){
      this.$axios.get(`/note/getMyNote/paperId=${this.id}`).then(res=>{
        if(res.data.data!=null)
          this.note=res.data.data
      }).catch(failRes=>{
        console.log(failRes)
      })
    },
    /*
      保存md的内容，
      进一步填写相关信息
     */
    saveNote(value, render){
      if(this.note.noteId===-1){
        this.$axios.post('/note/upload',{
          noteMd:value,
          noteHtml:render,
          paperId:this.paperId
        }).then(()=>{
          this.$message.success('上传成功')
        }).catch(failRes=>{
          console.log(failRes)
        })
      }else{
        this.$axios.post('/note/update',this.note).then(()=>{
          this.$message.success('修改成功')
        }).catch(failRes=>{
          console.log(failRes)
        })
      }

    },

    /*
    加载时间
     */
    currentDate() {
      let d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth();
      month = month + 1 > 12 ? 1 : month + 1;
      month = month > 9 ? month : "0" + month.toString();
      let day = d.getDate();
      day=day>9?day:"0"+day.toString();
      let hour = d.getHours();
      hour = hour > 9 ? hour : "0" + hour.toString();
      let minute = d.getMinutes();
      minute = minute > 9 ? minute : "0" + minute.toString();
      let second = d.getSeconds();
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },

    /*
      触发上传文件事件
     */
    uploadFile(){
      this.$refs.uploadInput.click()
    },

    /*
      加载文件
     */
    uploadFileChange(e) {
      // 获取到input选取的文件
      if (!e || !window.FileReader) return
      const file = e.target.files[0]
      const fileData = new FormData()
      fileData.append('file', file)

      // 发送请求，这里是大家各自的axios请求，方法大家按照各自项目更换就好啦
      this.$axios.post('/file/open',fileData).then(res => {
        this.note.noteMd=res.data.data
      }).catch(failRes=>console.log(failRes))
    },

    // /*
    // 上传图片
    //  */
    // imgAdd(pos,$file){
    //
    // }
  },


  /*
  加监控进行渲染
   */
  watch: {
    'id':{
      handler(newVal) {
        this.id = newVal
        this.getNote()
      },
      immediate:true
    }
  }
}
</script>

<style scoped>

</style>
